<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>斌斌学院_JS基础_test04</title>
    <style type="text/css">
    span{
        display: inline-block;
        margin: 10px 5px;
        padding: 0px 10px;
        height: 30px;
        line-height: 30px;
        background-color: red;
        cursor: pointer;
    }
    </style>
</head>
<body>
    <div class="page">
        <form><input type="text" id="input_text"/></form>
            <button id="left_in">左侧入</button>
            <button id="right_in">右侧入</button>
            <button id="left_out">左侧出</button>
            <button id="right_out">右侧出</button>
    </div>
       <div class="data">
       </div>
<script>
   function leftIn(queue) {
       var text=document.getElementById('input_text').value;
       if(checkText(text)){
           var span=document.createElement('span');
           span.innerHTML=text;
           var spanlist=queue.childNodes;
           queue.insertBefore(span,spanlist[0]);
       }
   }
   function rightIn(queue) {
       var text=document.getElementById('input_text').value;
       if(checkText(text)){
           var span=document.createElement('span');
           span.innerHTML=text;
           queue.appendChild(span);
       }
   }
   function rightOut(queue) {
       var spanlist=queue.childNodes;
       queue.removeChild(spanlist[spanlist.length-1]);
   }
   function leftOut(queue) {
       var spanlist=queue.childNodes;
       queue.removeChild(spanlist[0]);
   }
    function checkText(text) {
        var reg=/^[-+]?\d+(\.\d+)?$/;
        if(reg=="")
        {
            alert("输入不能为空");
            return false;
        }
        else if(!reg.test(text))
        {
            alert("请输入合法数据");
            return false;
        }
        else
                return true;
    }
    function Init() {
        var queue=document.getElementsByClassName('data')[0];
        document.getElementById('left_in').onclick=function () {
            leftIn(queue);
        };
        document.getElementById('right_in').onclick=function () {
           rightIn(queue);
        };
        document.getElementById('left_out').onclick=function () {
            leftOut(queue);
        };
        document.getElementById('right_out').onclick=function () {
            rightOut(queue);
        };
    }
    Init();
</script>
</body>
</html>